<template>
  <div class="main">
    <div class="chat-box">
      <div v-for="(message, index) in messages" :key="index" class="message">
        {{ message }}
      </div>
    </div>

    <div class="input-container">
      <van-field v-model="sendData" placeholder="请输入用户名"/>
      <van-button class="send-button" size="small" type="primary" @click="sendMessage(sendData)">发送</van-button>
    </div>
  </div>
</template>

<script>
export default {
    name: 'ChatGpt',
    data() {
      return {
        sendData: '',
        messages: ['这是一个消息']
      }
    },
    methods: {
      sendMessage(data) {
        console.log('数据', data);
      }
    }
}
</script>

<style scoped>
.main {
  max-width: 600px;
  margin: 0 auto;
}

.chat-box {
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;
  }

  .input-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .input-container van-field {
    flex: 1; /* Allow the input field to grow and take available space */
    margin-right: 10px; /* Add some spacing between input and button */
  }

  .send-button {
      width: 80px;
    }
</style>